<!--  -->
<template>
  <div>
    <h3>日期组件测试案例：</h3>
    <div class="block">
      <el-date-picker
        v-model="value"
        align="right"
        type="date"
        placeholder="选择日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :clearable="false"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div class="block">
      <el-date-picker
        type="date"
        placeholder="选择开始日期"
        v-model="timesH.startTime"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :clearable="false"
        :picker-options="pickerStartDate"
      ></el-date-picker>
      <span>-</span>
      <el-date-picker
        type="date"
        placeholder="选择结束日期"
        v-model="timesH.endTime"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :clearable="false"
        :picker-options="pickerEndDate"
      ></el-date-picker>
      <span @click="getNext7Days">最近一周</span>
      <span @click="getNextMonth">最近一个月</span>
      <span @click="getNext3Month">最近三个月</span>
      <span @click="getNext6Month">最近半年</span>
      <span @click="getNextYear">最近一年</span>
    </div>
    <h3>其他组件测试案例:</h3>
    <div>
      <el-button type="primary" @click="handleCheckDwbm">选择单位编码</el-button>
      <el-button type="primary" @click="handleCheckSbbm">选择设备编码</el-button>
      <el-button type="primary" @click="handleCheckZryy">选择责任原因编码</el-button>
      <el-button type="primary" @click="handleCheckZryyAll">选择责任原因编码All</el-button>
      <el-button type="primary" @click="handleCheckTdxz">选择停电性质码</el-button>
    </div>

    <!-- 选择单位编码 -->
    <GetDwbm :treeObj="treeObj" ref="getDwbmRef" @handleGetDwbm="handleGetDwbm"></GetDwbm>

    <!-- 选择设备编码 -->
    <GetTdsbbm ref="getTdsbbmRef" @handleGetTdsb="handleGetTdsb"></GetTdsbbm>

    <!-- 选择停电责任码 -->
    <GetZryybm ref="getZryybmRef" @handleGetZryy="handleGetZryy"></GetZryybm>

    <!-- 选择停电责任码All -->
    <GetZryybmAll ref="getZryybmAllRef" @handleGetZryyAll="handleGetZryyAll"></GetZryybmAll>

    <!-- 选择停电性质编码 -->
    <GetTdxzbm ref="getTdxzbmRef" @handleGetTdxz="handleGetTdxz"></GetTdxzbm>

  </div>
</template>

<script>
import { getUserInfo } from "../../../utils/util";
import GetDwbm from "../../../dialogCommom/GetDwbm"; 
import GetTdsbbm from "../../../dialogCommom/GetTdsbbm"; 
import GetZryybm from "../../../dialogCommom/GetZryybm"; 
import GetZryybmAll from "../../../dialogCommom/GetZryybmAll";
import GetTdxzbm from "../../../dialogCommom/GetTdxzbm";

export default {
  data () {   
    const that = this
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一个月前',
            onClick(picker) {
              const date = new Date()
              let preDate = that.getPreMonth(date)
              picker.$emit('pick', preDate)
            }
          },
          {
            text: '三个月前',
            onClick(picker) {
              const date = new Date()
              let preDate = that.get3MonthBefor(date)
              picker.$emit('pick', preDate)
            }
          },
          {
            text: '六个月前',
            onClick(picker) {
              const date = new Date()
              let preDate = that.get6MonthBefor(date)
              picker.$emit('pick', preDate)
            }
          },
          {
            text: '一年前',
            onClick(picker) {
              const date = new Date()
              let preDate = that.getPreYear(date)
              picker.$emit('pick', preDate)
            }
          }
        ]
      },
      value: '',
      timesH: {
        startTime: '',
        endTime: ''
      },
      pickerStartDate: { // 起始日期选择
          disabledDate: time => {
              if (this.timesH.endTime) {
                  return time.getTime() > new Date(this.timesH.endTime)     ;
              }
          }
      },
      pickerEndDate: { // 终止日期选择
          disabledDate: time => {
              if (this.timesH.startTime) {
                  return (
                      time.getTime() <
                      new Date(this.timesH.startTime)
                  );
              }
          }
      },
      treeObj: { // 传给选择单位编码组件的值
        type: 'checkbox',
        dwbm: ''
      }
    }
  },

  components: {
    GetDwbm,
    GetTdsbbm,
    GetZryybm,
    GetZryybmAll,
    GetTdxzbm
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  beforeUpdate () { 
  //解决列配置引发的滚动条问题 
  },

  update () {},

  destroyed () {},

  methods: {
    
    /**获取单位编码 */
    handleCheckDwbm(){
      console.log('单位编码')
      this.$refs.getDwbmRef.openDwbm()
    },
    /**单位编码回传 */
    handleGetDwbm(val){
      console.log('选择单位编码回传：', val)
      this.$message.error(JSON.stringify(val))
    },
    /**获取设备编码 */
    handleCheckSbbm(){
      console.log('设备编码')
      this.$refs.getTdsbbmRef.openTdsbbm()
    },
    /**设备编码回传 */
    handleGetTdsb(val){
      console.log('设备编码回传', val)
      this.$message.error(JSON.stringify(val))
    },
    /**获取责任原因编码 */
    handleCheckZryy(){
      console.log('责任原因编码')
      this.$refs.getZryybmRef.openZryybm()
    },
    /**责任原因编码回传 */
    handleGetZryy(val){
      console.log('获取责任元原因回传:', val)
      this.$message.error(JSON.stringify(val))
    },

    /**获取责任原因编码All */
    handleCheckZryyAll(){
      console.log('责任原因编码All')
      this.$refs.getZryybmAllRef.openZryybm()
    },
    /**责任原因编码回传All */
    handleGetZryyAll(val){
      console.log('获取责任元原因回传:', val)
      this.$message.error(JSON.stringify(val))
    },

    /**获取停电性质码 */
    handleCheckTdxz(){
      this.$refs.getTdxzbmRef.openDialog();
    },
    /**获取停电性质码 回传 */
    handleGetTdxz(val){
      this.$message.error(JSON.stringify(val))
    },
    


    getNext7Days() {
      const now = new Date();
      let pre = now.getTime() - 3600 * 1000 * 24 * 7;
      pre = new Date(pre)
      this.timesH = {
        startTime: this.getDate(pre),
        endTime: this.getDate(now)
      }
    },
    getNextMonth() {
      const now = new Date();
      let pre = this.getPreMonth(now)
      this.timesH = {
        startTime: pre,
        endTime: this.getDate(now)
      }
    },
    getNext3Month() {
      const now = new Date();
      let pre = this.get3MonthBefor(now)
      this.timesH = {
        startTime: pre,
        endTime: this.getDate(now)
      }
    },
    getNext6Month() {
      const now = new Date();
      let pre = this.get6MonthBefor(now)
      this.timesH = {
        startTime: pre,
        endTime: this.getDate(now)
      }
    },
    getNextYear() {
      const now = new Date();
      let pre = this.getPreYear(now)
      this.timesH = {
        startTime: pre,
        endTime: this.getDate(now)
      }
    },
    getDate(currDate) {
      let year = currDate.getFullYear();
      let month = currDate.getMonth() + 1;
      let day = currDate.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      let result = year + '-' + month + '-' + day;
      return result;
    },
    getPreMonth(currDate) {
      var year = currDate.getFullYear();
      var month = currDate.getMonth() + 1;
      var day = currDate.getDate();
      var days = new Date(year, month, 0);
      days = days.getDate();
      var year2 = year;
      var month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = '0' + month2;
      }
      let t2 = year2 + '-' + month2 + '-' + day2;
      return t2;
    },
    get3MonthBefor(currDate) {
      var year = currDate.getFullYear();
      var month = currDate.getMonth() + 1;
      var day = currDate.getDate();
      var days = new Date(year, month, 0);
      days = days.getDate();
      switch(month)
      {
        case 1:
        case 2:
        case 3:
          month += 9;
          year--;
          break;
        default:
          month -= 3;
          break;
      }
      var day2 = day;
      var days2 = new Date(year, month, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month < 10) {
        month = '0' + month;
      }
      let t2 = year + '-' + month + '-' + day2;
      return t2;
    },
    get6MonthBefor(currDate) {
      var year = currDate.getFullYear();
      var month = currDate.getMonth() + 1;
      var day = currDate.getDate();
      var days = new Date(year, month, 0);
      days = days.getDate();
      switch(month)
      {
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
          month += 6;
          year--;
          break;
        default:
          month -= 6;
          break;
      }
      var day2 = day;
      var days2 = new Date(year, month, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month < 10) {
        month = '0' + month;
      }
      let t2 = year + '-' + month + '-' + day2;
      return t2;
    },
    getPreYear(currDate) {
      var year = currDate.getFullYear();
      var month = currDate.getMonth() + 1;
      var day = currDate.getDate();
      var days = new Date(year, month, 0);
      days = days.getDate();
      year = year - 1
      var day2 = day;
      var days2 = new Date(year, month, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month < 10) {
        month = '0' + month;
      }
      let t2 = year + '-' + month + '-' + day2;
      return t2;
    }
  }
}

</script>
<style lang='scss' scoped>
.el-dialog__body {
  padding: 3px 10px;
}
.block {
  margin: 10px 0;
}
.block span {
  padding: 0 10px;
}

</style>